<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view style="background-color: #fff;padding:20rpx;">
				<view
					style="background-color: #2D80E3;padding: 40rpx;border-radius: 20rpx; box-shadow: 1rpx 1rpx 20rpx #2D80E3">
					<view
						style="display: flex;flex-direction: row; justify-content: space-around;margin-bottom: 40rpx;">
						<view class="team_top_item">
							<text class="team_top_item_num">{{total_team_num}}</text>
							<text class="team_top_item_title">总人数</text>
						</view>
						<view class="team_top_item">
							<text class="team_top_item_num">{{total_order_num}}</text>
							<text class="team_top_item_title">总订单</text>
						</view>
						<view class="team_top_item">
							<text class="team_top_item_num">{{today_order_num}}</text>
							<text class="team_top_item_title">今日订单</text>
						</view>
					</view>
					<view style="display: flex;flex-direction: row; justify-content: space-around;">
						<view class="team_men_item">
							<text class="team_men_item_num">{{direct_num}}</text>
							<text class="team_men_item_title">直推成员</text>
						</view>
						<view class="team_men_item">
							<text class="team_men_item_num">{{indirect_num}}</text>
							<text class="team_men_item_title">间推成员</text>
						</view>
						<view class="team_men_item">
							<text class="team_men_item_num">{{direct_partner_num}}</text>
							<text class="team_men_item_title">直推合伙人</text>
						</view>
						<view class="team_men_item">
							<text class="team_men_item_num">{{member_num}}</text>
							<text class="team_men_item_title">有效会员</text>
						</view>
					</view>

					<view style="margin-top: 40rpx;">
						<gewu-subsection :list="subsection" :current="curNow" @change="sectionChange"
							active-color="#fff" bg-color="#fff" button-color="#2D80E3"></gewu-subsection>
					</view>
				</view>

				<view style="display: flex;justify-content: center;margin-top: 20rpx;">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in radio"
							:key="index" :name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<view style="margin-top: 20rpx;">
				<view v-for="(item,index) in list" style="background-color: #fff; margin-bottom: 20rpx;padding: 20rpx;"
					:key="index">
					<view
						style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;border-bottom:2rpx solid #f5f5f5;padding-bottom: 20rpx;">
						<view style="display: flex;justify-content: center;align-items: center;flex-direction: row;">
							<u-avatar :src="item.avatar" size="90"></u-avatar>
							<view
								style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 20rpx;">
								<text style="margin-bottom: 20rpx;margin-left: 10rpx;">{{item.nick_name}}</text>
								<view
									:style="{background: `url(${images.levelBg})`,backgroundRepeat: 'no-repeat', backgroundSize: 'cover', width: '98rpx', height: '32rpx', fontSize: '18rpx', color: '#6C2A09', display: 'flex', alignItems: 'center', justifyContent: 'center',lineHeight: '32rpx'}">
									{{item.level_txt}}
								</view>
							</view>
						</view>
						<view style="display: flex;flex-direction: column;align-items: flex-end;">
							<text style="font-size: 24rpx;color: #999;margin-bottom: 8rpx;">{{item.create_time}}</text>
							<view @click="copy(item.wx_number)" v-if="item.wx_number"
								style="font-size: 26rpx;color: #999;">微信号: {{item.wx_number}}</view>
							<view v-if="item.wx_number == ''" style="font-size: 26rpx;color: #999;">微信号: 未填写</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;justify-content: space-around;padding-top: 20rpx;">
						<view class="team-user-count-item">
							<text class="team-user-count-item-title">ID</text>
							<text class="team-user-count-item-num">{{item.id}}</text>
						</view>
						<view class="team-user-count-item">
							<text class="team-user-count-item-title">团队人数</text>
							<text class="team-user-count-item-num">{{item.team_num}}</text>
						</view>
						<view class="team-user-count-item">
							<text class="team-user-count-item-title">订单数量</text>
							<text class="team-user-count-item-num">{{item.order_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import gewuSubsection from "../../components/gewu-subsection.vue";
	export default {
		components: {
			gewuSubsection
		},
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				today_order_num: 0,
				total_order_num: 0,
				total_team_num: 0,
				direct_num: 0,
				direct_partner_num: 0,
				indirect_num: 0,
				member_num: 0,
				pagination: {
					page: 1,
					pageSize: 0,
					total: 0,
				},
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				subsection: [{
						name: '按时间排序'
					},
					{
						name: '按订单排序'
					}
				],
				curNow: 0,
				radio: [{
						name: '只看合伙人',
						value: 0,
						checked: false
					},
					{
						name: '只看有效会员',
						value: 1,
						checked: false
					}
				],
				radioValue: 1,
				images: {},
				sort: 'time',
				partner: 0,
				member: 0
			}
		},
		onLoad() {
			this.images = imagesUrl.my
		},
		methods: {
			sectionChange(index) {
				console.log(index)
				this.curNow = index;
				if (index == 0) {
					this.sort = 'time'
				} else if (index == 1) {
					this.sort = 'order'
				}
				this.pagination.page = 1
				this.getData()
			},
			checkboxChange(e) {
				console.log(e)
				for (let i = 0; i < this.radio.length; i++) {
					this.radio[i].checked = false
					if (this.radio[i].name == e.name) {
						this.radio[i].checked = e.value
					}
				}
				if (e.name == "只看合伙人" && e.value == true) {
					this.partner = 1
					this.member = 0
				} else if (e.name == "只看有效会员" && e.value == true) {
					this.partner = 0
					this.member = 1
				} else {
					this.partner = 0
					this.member = 0
				}
				this.pagination.page = 1
				this.getData()
			},
			checkboxGroupChange(e) {
				console.log(e)
			},
			getData() {
				let that = this;
				this.$u.api.myTeam({
					page: that.pagination.page,
					pageSize: 20,
					sort: that.sort,
					partner: that.partner,
					member: that.member
				}).then(res => {
					that.mescroll.endByPage(res.child_user.length, res.child_user_pagination.total)
					that.pagination = res.child_user_pagination;
					that.today_order_num = res.today_order_num
					that.total_order_num = res.total_order_num
					that.total_team_num = res.total_team_num
					that.direct_num = res.direct_num
					that.direct_partner_num = res.direct_partner_num
					that.indirect_num = res.indirect_num
					that.member_num = res.member_num

					if (that.pagination.page == 1) {
						that.list = res.child_user
					} else {
						that.list = [...that.list, ...res.child_user]
					}
					that.pagination.page++
				})
			},
			upCallback() {
				this.getData()
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log(1111)

					}
				});
			}
		}
	}
</script>

<style>
	body {
		background-color: #f5f5f5;
	}

	.team_top_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.team_top_item_num {
		color: #fff;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.team_top_item_title {
		color: #fff;
		font-size: 28rpx;
	}

	.team_men_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.team_men_item_num {
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.team_men_item_title {
		color: #fff;
		font-size: 28rpx;
	}

	.team-user-count-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.team-user-count-item-title {
		color: #999;
		font-size: 28rpx;
	}

	.team-user-count-item-num {
		color: #d8d673;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>
